<template>
	<div class="invitation navBar">
		<van-nav-bar :title="$route.meta.title" left-arrow @click-left="$routerBack" />
		<div class="invitation_view">
			<div class="inv_content">
				<div class="ic_top">
					<span>我的邀请码</span>
					<img src="../../assets/user/bolang.png" alt="">
				</div>

				<p class="phone" v-if="user_info">{{user_info.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</p>

				<div class="copy" @click="copy( 'http://www.facai888008.cn/login?phone=' + user_info.mobile )">复制</div>

				<p class="text">复制邀请码，邀请更多好友来加入</p>
				
				<div style="display: flex;justify-content: center;margin-bottom: .45rem;">
					<div class="qrcode" ref="qrCodeUrl"></div>
				</div>
				
				<p class="text" @click="saveImg">点击保存二维码分享</p>

			</div>
		</div>
	</div>
</template>

<script>
	import QRCode from 'qrcodejs2'

	export default {
		name: "invitation",
		async mounted() {
			
			if (!this.$store.state.user_info) {
			
				try {
			
					const data = await this.$apis.User.xinxi()
			
					this.user_info = data.data
			
					this.$store.state.user_info = data.data
					
					var qrcode = new QRCode(this.$refs.qrCodeUrl, {
						text: 'http://www.facai888008.cn/login?phone=' + data.data.mobile  , // 需要转换为二维码的内容
						width: 100,
						height: 100,
						colorDark: '#000000',
						colorLight: '#ffffff',
						correctLevel: QRCode.CorrectLevel.H
					})
					
					console.log(data.data.mobile)
					
			
				} catch (e) {
					//TODO handle the exception
				}
			
			} else {
			
				this.user_info = this.$store.state.user_info
				
				console.log(this.user_info)
				
				let _this = this
				
				var qrcode = new QRCode(this.$refs.qrCodeUrl, {
					text: 'http://www.facai888008.cn/login?phone=' + _this.user_info.mobile  , // 需要转换为二维码的内容
					width: 100,
					height: 100,
					colorDark: '#000000',
					colorLight: '#ffffff',
					correctLevel: QRCode.CorrectLevel.H
				})
				
			}
			
			
		},
		data() {
			return {
				user_info: ""
			}
		},
		methods:{
			copy(text){
								
				const input = document.createElement('input');
				document.body.appendChild(input);
				input.setAttribute('value', text);
				input.select();
				if (document.execCommand('copy')) {
					document.execCommand('copy');
					this.$toast("成功复制到剪切板！")
				}
				document.body.removeChild(input);
			},
			saveImg(){
				console.log(document.querySelectorAll(".qrcode")[0].childNodes[1].src)
				this.downloadIamge(document.querySelectorAll(".qrcode")[0].childNodes[1].src,"矿机人生.png")
			},
			downloadIamge: function(imgsrc, name) {
			  let image = new Image();
			  image.setAttribute("crossOrigin", "anonymous");
			  image.onload = function() {
			    let canvas = document.createElement("canvas");
			    canvas.width = image.width;
			    canvas.height = image.height;
			    let context = canvas.getContext("2d");
			    context.drawImage(image, 0, 0, image.width, image.height);
			    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
			    let a = document.createElement("a"); // 生成一个a元素
			    let event = new MouseEvent("click"); // 创建一个单击事件
			    a.download = name || "photo"; // 设置图片名称
			    a.href = url; // 将生成的URL设置为a.href属性
			    a.dispatchEvent(event); // 触发a的单击事件
			  };
			  image.src = imgsrc;
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../style/navBar.less';
	.qrcode{
		width: 2.5rem;
		height: 2.5rem;
		box-sizing: border-box;
	   padding: .2rem;
	   display: inline-block;
	   background-color: rgba(255,255,255,1);
	}

	.invitation_view {

		.copy {
			margin: auto;
			width: 1.4rem;
			height: .68rem;
			background: linear-gradient(0deg, rgba(28, 206, 244, 1), rgba(0, 254, 202, 1));
			border-radius: .34rem;
			color: #333333;
			font-size: .28rem;
			text-align: center;
			line-height: .68rem;
			display: block;
			margin-top: .68rem;
			margin-bottom: .4rem;
		}

		.text {
			text-align: center;
			font-size: .28rem;
			color: #94E9FF;
			font-weight: bold;
			margin-bottom: 1.47rem;
		}

		.inv_content {
			padding-top: .8rem;
			margin: auto;
			width: 7.18rem;
			height: 10.73rem;
			background-image: url(../../assets/user/invitation_bg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.phone {
			font-size: .72rem;
			font-weight: bold;
			text-align: center;
			color: #94E9FF;
			margin-top: .91rem;
		}

		.ic_top {
			text-align: center;
			position: relative;
			color: #94E9FF;
			font-size: .36rem;

			img {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
</style>
